<template>
  <div class="app-container">
    <el-card>
      <div class="table-layout">
        <el-descriptions :title="$t('优惠券使用统计')" direction="vertical" :column="14" border>
          <el-descriptions-item :label="$t('发放数量')">{{ statistics.pullNumber }}</el-descriptions-item>
          <el-descriptions-item :label="$t('领取数量')">{{ statistics.receivingNumber }}</el-descriptions-item>
          <el-descriptions-item :label="$t('使用数量')">{{ statistics.useCount }}</el-descriptions-item>
          <el-descriptions-item :label="$t('过期数量')">{{ statistics.expireNum }}</el-descriptions-item>
          <el-descriptions-item :label="$t('用券订单总额')">$ {{
              statistics.orderTotalActual
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('总优惠金额')">$ {{ statistics.orderTotalDiscount }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <br/>

    <el-select size="mini" v-model="listQuery.couponType" clearable filterable :placeholder="$t('赠送策略')">
        <el-option v-for="index in 8" :label="drawerTitleMap[index]" :value="index"></el-option>
    </el-select>

    <el-input size="mini" style="width: 200px" placeholder="请输入策略名称" v-model="listQuery.strategyName" clearable>
    </el-input>

    <el-input size="mini" style="width: 200px" placeholder="请输入优惠券名称" v-model="listQuery.couponName" clearable>
    </el-input>

    <el-select size="mini" v-model="listQuery.rangesType" clearable placeholder="请选择使用范围">
        <el-option v-for="item in rangesOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <el-select size="mini" v-model="listQuery.discountType" clearable placeholder="请选择折扣类型">
      <el-option v-for="item in discountOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>

<!--    <el-date-picker size="mini" v-model="listQuery.startTime" class="filter-item"
                    :editable="false" :clearable="false" :placeholder="$t('Start_time')" format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"></el-date-picker>

    <el-date-picker size="mini" v-model="listQuery.endTime" class="filter-item" :editable="false"
                    :clearable="false" :placeholder="$t('End_time')" format="yyyy - MM - dd "
                    value-format="yyyy-MM-dd"></el-date-picker>-->

    <el-select size="mini" v-model="listQuery.shopId" clearable class="filter-item" :placeholder="$t('请选择门店')">
      <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
    </el-select>



    <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="strategyCouponStatisticList">{{ $t('Search') }}</el-button>

    <br/>
    <el-card>
      <el-table
        v-loading="loading"
        :data="list"
        element-loading-background = "rgba(0, 0, 0, 0.5)"
        element-loading-text = "数据正在计算中"
        element-loading-spinner = "el-icon-loading"
        border
        style="width: 100%">
        <el-table-column :label="$t('序号')" type="index">
        </el-table-column>
        <el-table-column align="center" property="aim" :label="$t('赠送策略')" width="150">
          <template slot-scope="scope">
            {{ drawerTitleMap[scope.row.couponType] }}
          </template>
        </el-table-column>
        <el-table-column prop="strategyName" :label="$t('策略名称')" width="180">
        </el-table-column>
        <el-table-column prop="couponName" :label="$t('优惠券名称')" width="180">
        </el-table-column>
        <el-table-column prop="pullNumber" :label="$t('发放数量')" width="180">
          <template slot-scope="scope">
            <span >{{ scope.row.pullNumber == 0? $t('不限量'): scope.row.pullNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="receivingNumber" :label="$t('领取数量')" width="180">
        </el-table-column>
        <el-table-column prop="useNum" :label="$t('使用数量')" width="180">
        </el-table-column>
        <el-table-column prop="expireNum" :label="$t('过期数量')" width="180">
        </el-table-column>
        <el-table-column prop="memberUseNum" :label="$t('会员用券数量')" width="180">
        </el-table-column>
        <el-table-column prop="orderTotalActual" :label="$t('用券订单总额')" width="180">
        </el-table-column>
        <el-table-column prop="orderTotalDiscount" :label="$t('总优惠金额')" width="180">
        </el-table-column>

        <el-table-column align="center" property="aim" :label="$t('使用范围')" width="150">
          <template slot-scope="scope">
            <span v-for="item in scope.row.ranges">{{ rangesMap[item] }}、</span>
          </template>
        </el-table-column>

        <el-table-column align="center" property="aim" :label="$t('折扣类型')" width="150">
          <template slot-scope="scope">
            <span :style="{color:'#3399ff'}">{{ discountTypeMap[scope.row.discountType] }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" property="aim" :label="$t('有效期')" width="150">
          <template slot-scope="scope">
            {{ scope.row.timeType == 0 ? scope.row.days+$t('天'): scope.row.startTime+"-"+scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column  fixed="right" align="center" :label="$t('Operate')" width="80" class-name="small-padding fixed-width">
          <template slot="header" slot-scope="{row}">
            {{$t('Operate')}}
            <i class="el-icon-setting"style="color: #d35e32"></i>
          </template>
          <template slot-scope="scope">
            <el-button icon="el-icon-view" size="mini" type="primary"
                       @click="handleDetail(scope.row)">{{ $t('Details') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="strategyCouponStatisticList"/>
    </el-card>
  </div>
</template>

<script>
import {allForPerm} from '../../api/shop'
import Pagination from '@/components/Pagination'
import {generalCouponUser, strategyCouponStatistic} from '../../api/couponUser'

export default {
  name: "couponStatistic.vue",
  components: {Pagination},
  data() {
      const drawerTitleMap = {
          1: this.$t('电子优惠券'),
          2: this.$t('实体优惠券'),
          3: this.$t('推广优惠券'),
          4: this.$t('生日福利券'),
          5: this.$t('等级会员券'),
          6: this.$t('付费会员券'),
          7: this.$t('余额充值券'),
          8: this.$t('礼物卡充值券')
      }
      const discountTypeMap = {
        1: this.$t('满减'),
        2: this.$t('折扣')
      }
      const rangesMap = {
        1: this.$t('APP'),
        2: this.$t('POS'),
        3: this.$t('网站')
      }
    return {
      loading: false,
      shops: [],
      statisticsQuery: {
        startTime: undefined,
        endTime: undefined,
        shopId: undefined
      },
      statistics: {
        pullNumber: undefined,
        receivingNumber: undefined,
        useCount: undefined,
        expireNum: undefined,
        orderTotalActual: undefined,
        orderTotalDiscount: undefined,
      },
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 20,
        strategyName:'',
        couponName:'',
        rangesType:undefined,
        discountType:undefined,
        shopId: undefined
      },
      rangesOptions:[{
          value: 0,
          label: '通用'
      }, {
          value: 1,
          label: 'APP'
      }, {
          value: 2,
          label: 'POS'
      }],
      discountOptions:[{
        value: 1,
        label: '满减'
      }, {
        value: 2,
        label: '百分比'
      }],
      drawerTitleMap,
      rangesMap,
      discountTypeMap,
    }
  },
  created() {
    allForPerm().then(response => {
      this.shops = response.data.data.list
    })
    this.getList()
    this.strategyCouponStatisticList()
  },
  methods: {
    getList() {
      generalCouponUser().then(res => {
        this.statistics = res.data.data
      })
    },
    strategyCouponStatisticList() {
      this.loading = true
      strategyCouponStatistic(this.listQuery).then(res => {
        this.list = res.data.data.list
        this.total = res.data.data.total
        this.loading = false
      })
      .catch(() => {
        this.list = []
        this.total = 0
        this.loading = false
      })
    },
    handleDetail(row){ this.$router.push({ path: '/coupon/couponStatisticDetail', query: { row: row }})}
  }
}
</script>

<style scoped>

</style>
